@charset "UTF-8";

/*music*/
.media-wrap {
	position: absolute;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	top: 0.2rem;
	right: 0.2rem;
	z-index: 99999999;
}
.media-wrap img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 999999999999999;
}
.media-wrap .music_off {
	display: none;
}
@-webkit-keyframes music {
	0%, 50%, 100% {
		-webkit-transform: rotate(0deg)
	}
	25% {
		-webkit-transform: rotate(36deg)
	}
	75% {
		-webkit-transform: rotate(-36deg)
	}
}
.media-wrap.on {
	-webkit-animation: music 1.2s linear infinite;
	background-position: 0 0;
}
/*music*/
/*loading*/
.x {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
}
.y {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
}
.xy {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
}
.posa {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.loading {
	height: 100%;
	color: #fff;
	background-color: #005082;
	z-index: 999;
}
.loading .load-content {
	width: 3.3rem;
	height: 0.3rem;
}
.loading .cell {
	width: 100%;
	height: 100%;
	border: 1px solid #fff;
	background-color: #005082;
	box-sizing: border-box;
	border-radius: 0.1rem;
	overflow: hidden;
	-webkit-transform: translateZ(0);
}
.loading .progress {
	width: 100%;
	height: 100%;
	background-color: #fff;
	-webkit-transform: scaleX(0);
	-webkit-transform-origin: 0 0;
}
.loading .ideal {
	position: absolute;
	left: 50%;
	width: 3rem;
	height: 2rem;
	top: -1.7rem;
	overflow: hidden;
	-webkit-transform: translate(-50%, 0) scale(0.7);
	z-index: -1;
}
.loading .ideal:before, .loading .ideal:after, .loading .head:before, .loading .head, .loading .head:after, .loading .hat {
	background-color: #fff;
}
.loading .head {
	border: 1px solid #a6a6a6;
}
.loading .ideal:before, .loading .ideal:after {
	content: '';
    position: absolute;
    bottom: -0.2rem;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
	-webkit-animation: hand-ani 4s ease-in 0s infinite;
}
.loading .ideal:before {
	left: 0.2rem;
}
.loading .ideal:after {
	right: 0.2rem;
}
.loading .head-wrap {
	width: 1.6rem;
	height: 1.5rem;
	position: absolute;
	bottom: -0.25rem;
	left: 50%;
	margin-left: -0.8rem;
	-webkit-animation: head-ani 4s ease-out 0s infinite;
}
.loading .head {
	width: 100%;
	height: 100%;
	padding: 0.1rem;
	box-sizing: border-box;
	border-radius: 50%;
	background-color: #fff;
}
.loading .head:before, .loading .head:after {
	content: '';
	position: absolute;
	bottom: 0.38rem;
	width: 0.8rem;
	height: 0.8rem;
	z-index: -1;
	border-radius: 50%;
	-webkit-transform: translateY(-0rem);
}
.loading .head:before {
	left: -0.1rem;
	-webkit-animation: left-ear-ani 4s 0s infinite;
}
.loading .head:after {
	right: -0.1rem;
	-webkit-animation: right-ear-ani 4s 0s infinite;
}
.loading .face {
	width: 100%;
	height: 100%;
	position: relative;
	background-color: #005082;
	border-radius: 50%;
	-webkit-animation: face-ani 4s 0s infinite;
}
.loading .face:before, .loading .face:after {
	content: '';
	position: absolute;
	bottom: 0.5rem;
	width: 0.2rem;
	height: 0.2rem;
	background-color: #fff;
	border-radius: 50%;
	-webkit-animation: eye-ani 4s 0s infinite;
}
.loading .face:before {
	left: 25%;
}
.loading .face:after {
	right: 25%;
}
.loading .hat {
	position: absolute;
	top: -0.06rem;
	left: 50%;
	width: 0.44rem;
	height: 0.44rem;
	border-radius: 50%;
	margin-left: -0.22rem;
	z-index: -1;
}
/* .loading .hat:before {
	content: '';
	position: absolute;
	bottom: 100%;
	left:50%;
	width: 0.04rem;
	height: 0.27rem;
	margin-left: -0.02rem;
	background-color: #fff;
} */
@-webkit-keyframes head-ani {
	0%, 20% {
		-webkit-transform: translateY(110%);
	}
	25%, 35% {
		-webkit-transform: translateY(60%);
	}
	40%, 90% {
		-webkit-transform: translateY(0);
	}
	92%, 100% {
		-webkit-transform: translateY(110%);
	}
}
@-webkit-keyframes hand-ani {
	0%, 1% {
		-webkit-transform: translate(0, 110%);
	}
	10%, 12% {
		-webkit-transform: translate(0, -4%);
	}
	15%, 93% {
		-webkit-transform: translate(0, 0);
	}
	96%, 100% {
		-webkit-transform: translate(0, 110%);
	}
}
@-webkit-keyframes eye-ani {
	0%, 45% {
		-webkit-transform: scaleY(1);
	}
	47%, 48% {
		-webkit-transform: scaleY(0.1);
	}
	50%, 65% {
		-webkit-transform: scaleY(1);
	}
	67%, 68% {
		-webkit-transform: scaleY(0.1);
	}
	70%, 82% {
		-webkit-transform: scaleY(1);
	}
	84%, 85% {
		-webkit-transform: scaleY(0.1);
	}
	86%, 100% {
		-webkit-transform: scaleY(1);
	}
}
@-webkit-keyframes face-ani {
	0%, 50% {
		-webkit-transform: translate(0, 0);
	}
	57%, 64% {
		-webkit-transform: translate(-5%, 0);
	}
	71%, 78% {
		-webkit-transform: translate(5%, 0);
	}
	85%, 100% {
		-webkit-transform: translate(0, 0);
	}
}
@-webkit-keyframes left-ear-ani {
	0%, 50% {
		-webkit-transform: translate(0, 0);
	}
	57%, 64% {
		-webkit-transform: translate(6%, 0);
	}
	71%, 78% {
		-webkit-transform: translate(-2%, 0);
	}
	85%, 100% {
		-webkit-transform: translate(0, 0);
	}
}
@-webkit-keyframes right-ear-ani {
	0%, 50% {
		-webkit-transform: translate(0, 0);
	}
	57%, 64% {
		-webkit-transform: translate(2%, 0);
	}
	71%, 78% {
		-webkit-transform: translate(-6%, 0);
	}
	85%, 100% {
		-webkit-transform: translate(0, 0);
	}
}
@-webkit-keyframes lightLoop {
	0% {
		-webkit-transform: scale(1, 1);
	}
	100% {
		-webkit-transform: scale(1.2, 3);;
	}
}
.loading .progress-num {
	position: absolute;
	top: 0;
	left: 104%;
	height: 100%;
	line-height: 0.3rem;
	font-size: 0.2rem;
}
.loading p {
	text-align: center;
	position: absolute;
	top: 0.5rem;
	left: 0;
	width: 100%;
	font-size: 0.24rem;
}
/*loading*/
/*cover*/
.cover {
	height: 100%;
	background-color: #005082;
	z-index: 998;
	display: none;
}
.cover .iphone {
	width: 2.9rem;
	height: 4.36rem;
	position: absolute;
	left: 50%;
	top: 40%;
	margin-top: -2.18rem;
	margin-left: -1.45rem;
	background: url(../images/phone.png) no-repeat;
	background-size: 100% 100%;
	animation: zhuan 1.5s 0.3s infinite;
	-webkit-animation: zhuan 1.5s 0.3s infinite
}
.cover p {
	position: absolute;
	top: 65%;
	left: 0;
	text-align: center;
	width: 100%;
	color: #fff;
	font-size: .5rem;
	line-height: 1.5;
}
@keyframes zhuan {
	0% {
		transform: rotate(-90deg)
	}
	50% {
		transform: rotate(0deg)
	}
	100% {
		transform: rotate(-90deg)
	}
}
@-webkit-keyframes zhuan {
	0% {
		-webkit-transform: rotate(-90deg)
	}
	50% {
		-webkit-transform: rotate(0deg)
	}
	100% {
		-webkit-transform: rotate(-90deg)
	}
}
@media screen and (orientation:landscape) {
	.cover {
		display: block
	}
}
/*cover*/